<template>
	<div class="customer">

		<el-row style="margin-top: 15px;padding: 20px 0;font-size: 15px;">
			<el-col :span="24">
				<el-button type="primary" @click="edit('addCk')">+新增
				</el-button>
			</el-col>
		</el-row>
		 <el-tabs v-model="activeName" @tab-click="handleClick">
		    <el-tab-pane label="全部banner" name="first">
				<el-table :data="pageInfo.vos" v-loading="table_loading" element-table_loading-text="加载中" stripe @sort-change='order'
				 style="width: 100%">
					<el-table-column width="150" label="图片">
						<template scope="scope">
							<img class="banner" :src="scope.row.bannerIcon" style="width: 80px;height: 80px;margin: 5px 0;">
						</template>
					</el-table-column>
					<el-table-column prop="bannerName" label="名称">
					</el-table-column>
					<el-table-column label="排序值" prop="banner_Sort" width="115" sortable='custom'>
						<template scope="scope">
							<el-input v-model="scope.row.bannerSort" style="width: 80px;" @blur="editOrder(scope.row,$event)" @focus="setOldProbability(scope.row)"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="跳转类型">
						<template scope="scope">
							<span>{{ findState(scope.row.bannerType,bannerType) }}</span>
						</template>
					</el-table-column>
					<el-table-column sortable='custom' prop="CRE_TIME" label="创建时间">
						<template scope="scope">
							<span>{{dateFormat(scope.row.creTime,'y-m-d h:i')}}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="250">
						<template scope="scope">
							<el-button size="small" type="primary" @click="edit(scope.row.bannerCode)">编辑
							</el-button>
							<el-button size="small" type="danger" @click="handleDetele(scope.row.bannerCode)">删除
							</el-button>
							<el-button size="small" :type="scope.row.bannerState=='Y'?'danger':'success'" @click="using(scope.row)">{{scope.row.bannerState=='Y'?'禁用':'启用'}}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="paginate">
					<el-pagination @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"
					 layout="total, prev, pager, next, jumper" :total="pageInfo.count">
					</el-pagination>
				</div>
			</el-tab-pane>
		    <el-tab-pane label="创客banner" name="second">
				<el-table :data="pageInfo.vos" v-loading="table_loading" element-table_loading-text="加载中" stripe @sort-change='order'
					 style="width: 100%">
						<el-table-column width="150" label="图片">
							<template scope="scope">
								<img class="banner" :src="scope.row.bannerIcon" style="width: 80px;height: 80px;margin: 5px 0;">
							</template>
						</el-table-column>
						<el-table-column prop="bannerName" label="名称">
						</el-table-column>
						<el-table-column label="排序值" prop="banner_Sort" width="115" sortable='custom'>
							<template scope="scope">
								<el-input v-model="scope.row.bannerSort" style="width: 80px;" @blur="editOrder(scope.row,$event)" @focus="setOldProbability(scope.row)"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="跳转类型">
							<template scope="scope">
								<span>{{ findState(scope.row.bannerType,bannerType) }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable='custom' prop="CRE_TIME" label="创建时间">
							<template scope="scope">
								<span>{{dateFormat(scope.row.creTime,'y-m-d h:i')}}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="250">
							<template scope="scope">
								<el-button size="small" type="primary" @click="edit(scope.row.bannerCode)">编辑
								</el-button>
								<el-button size="small" type="danger" @click="handleDetele(scope.row.bannerCode)">删除
								</el-button>
								<el-button size="small" :type="scope.row.bannerState=='Y'?'danger':'success'" @click="using(scope.row)">{{scope.row.bannerState=='Y'?'禁用':'启用'}}
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="paginate">
						<el-pagination @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"
						 layout="total, prev, pager, next, jumper" :total="pageInfo.count">
						</el-pagination>
					</div>
				</el-tab-pane>
			</el-tab-pane>
		  </el-tabs>
	</div>
</template>
<style>
	.el-tabs__item{
		font-size: 18px;
		font-weight: 500;
	}
</style>
<script>
	export default {
		data() {
			return {
				pageInfo: {
					pageNum: 1,
					pageSize: 10,
					count: 1,
					vos: []
				},
				activeName: 'first',
				table_loading: false,
				bannerType: [{
					text: '单商品',
					value: 'D'
				}, {
					text: '多商品',
					value: 'DD'
				}, {
					text: '链接',
					value: 'L'
				}, {
					text: '商家',
					value: 'DP'
				}, {
					text: '文章',
					value: 'T'
				}, {
					text: '不跳转',
					value: 'B'
				},{
					text: '商家入驻',
					value: 'S'
				},],
				formInline: {
					desc: 'DESC',
					sorts: 'BANNER_SORT + 0',
					pageSize: 10,
					bannerPosition: ''
				}
			}
		},
		created() {

		},
		activated() {
			this.fetchData(this.pageInfo.pageNum);
		},
		methods: {
			 handleClick() {
			      if (this.activeName == 'first') {
					  this.formInline = {
						desc: 'DESC',
						sorts: 'BANNER_SORT + 0',
						pageSize: 10,
						bannerPosition: ''
					}
					this.fetchData(1)
				  }
				  if (this.activeName == 'second') {
					  this.formInline = {
					  	desc: 'DESC',
					  	sorts: 'BANNER_SORT + 0',
					  	pageSize: 10,
					  	bannerPosition: 'CK'
					  }
					  this.fetchData(1)
				  }
			 },
			fetchData(page = 1) {
				this.table_loading = true;
				this.pageInfo.pageNum = page
				this.formInline.pageNum = this.pageInfo.pageNum
				this.dataApi.ajax('bannerPage', {
					pageNum: this.formInline.pageNum,
					pageSize: 10,
					sort: this.formInline.sorts,
					desc: this.formInline.desc,
					bannerPosition: this.formInline.bannerPosition
				}, res => {
					//console.log(res)
					this.table_loading = false;
					if (res.responseType === 'S') {
						this.pageInfo = res
					}
				});

			},
			edit(id) {
				this.$router.push('/official/CKbanner_list_detail/' + id)
			},
			using(item) {
				var type = ''
				var state = ''
				let data = generateObj(item)
				if (data.bannerState == 'Y') {
					type = '禁用'
					state = 'J'
				} else {
					type = '启用'
					state = 'Y'
				}
				data.bannerState = state
				this.$confirm('确定' + type + '?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.dataApi.ajax('bannerEdit', data, res => {
						if (res.responseType === 'S') {
							this.showMsg(type + '成功')
							this.fetchData(this.pageInfo.pageNum)
						}
					});
				}).catch(() => {

				});
			},
			handleCurrentChange(val) {
				this.fetchData(val)
			},
			handleDetele(id) {
				this.$confirm('确定删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.dataApi.ajax('bannerDelete', {
						bannerCode: id
					}, res => {
						if (res.responseType === 'S') {
							this.showMsg('删除成功');
							this.fetchData(this.pageInfo.pageNum);
						}
					});
				}).catch(() => {

				});

			},
			order(column) {
				if (!column.order) {
					return;
				}
				if (column.order == 'ascending') {
					this.desc = 'ASC'
				} else {
					this.desc = 'DESC'
				}
				this.sorts = column.prop
				this.fetchData(this.pageInfo.pageNum)
			},
			editOrder(item) {
				if (Math.floor(item.bannerSort) <= 0) {
					item.bannerSort = item.OldProbability || 0;
					return false;
				}
				if (item.OldProbability == item.bannerSort) return false;
				if (!isNumber(item.bannerSort)) {
					this.showMsg('只能输入数字', 'warning')
					item.bannerSort = item.OldProbability
					return false;
				}
				if (item.bannerSort > this.pageInfo.totalRows) {
					this.showMsg('排序值不能大于总数', 'warning')
					item.bannerSort = item.OldProbability
					return false;
				}
				this.dataApi.ajax('bannerEdit', item, res => {
					if (res.responseType === 'S') {
						this.showMsg('修改成功');
						this.fetchData(this.pageInfo.pageNum);
					}
				});
			},
			setOldProbability(item) {
				item.OldProbability = item.bannerSort
			},
		}
	}
</script>
